<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
     <script th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
    <link th:href="@{../lib/layui-v2.6.3/css/layui.css}" media="all" rel="stylesheet">
    <link th:href="@{../css/public.css}" media="all" rel="stylesheet">
    <script charset="utf-8" th:src="@{../lib/layui-v2.6.3/layui.js}"></script>
    <script charset="utf-8" th:src="@{../js/lay-config.js?v=1.0.4}"></script>
    <script th:src="@{../../js/template-web.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <title>地址信息</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="/skippage?url=udai_setting">
                    <dd>个人资料</dd>
                </a>
                <a href="/skippage?url=udai_address">
                    <dd class="active">收货地址</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="/skippage?url=udai_order">
                    <dd>我的订单</dd>
                </a>
                <a href="/skippage?url=udai_refund">
                    <dd>售后</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">账户信息-收货地址</div>
                <div class="layuimini-container">
                    <div class="layuimini-main">
                        <form action="" class="layui-form" style="padding:20px;">
                            <div class="layui-form-item" id="area-picker">
                                <div class="layui-form-label" style="width: auto">收获地址:</div>
                                <div class="layui-input-inline" style="width: 200px;margin-left: 20px">
                                    <select class="province-selector"lay-filter="province-1" name="province">
                                        <option value="">请选择省</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <select class="city-selector"  lay-filter="city-1" name="city">
                                        <option value="">请选择市</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width: 200px;">
                                    <select class="county-selector"  lay-filter="county-1" name="county">
                                        <option value="">请选择区</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width: 400px;margin-left: 110px;margin-top: 30px">
                                    <input class="layui-input" id="address" placeholder="详细地址">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="layui-form"  lay-filter="example">
                    <div class="layui-form-item" style="margin-left: 61px;margin-top: 30px">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-left: 40px">
                        <label class="layui-form-label" style="width: 100px">联系电话:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-6">
                            <button style="margin-left: 250px" class="layui-btn layui-btn-primary layui-border-black" id="LAY-component-form-getval">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 50px">
                <div class="user-content__box clearfix bgf">
                    <div class="title">收货地址管理</div>

                    <div style="margin-top: 40px">
                        <table class="layui-table" id="AddressTable"  lay-filter="AddressTable" lay-skin="nob"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_welcome.html">
                <i class="iconfont icon-user" data-badge="0"></i>
                <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_shopcart.html">
                <i class="iconfont icon-cart"></i>
                <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_collection.html">
                <i class="iconfont icon-aixin"></i>
                <div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="">
                <i class="iconfont icon-liaotian"></i>
                <div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
            </a>
        </li>
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</body>
<script type="text/html" id="switch">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="isteo" {{ d.isDefault == 0 ? 'checked' : '' }}>
</script>
<script id="bar" type="text/html">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use(['layer', 'form', 'layarea','table'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea
            , table=layui.table;
        var data=null;
        table.render({
            elem: '#AddressTable'
            , method: 'POST'
            , title: '收获地址管理'
            , url: '/address/getList'
            ,contentType: "application/json; charset=utf-8"
            ,skin:"line"
            ,parseData: function(res){
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "data": res.data
                };
            }
            , cols: [
                [
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', title: '收货人名称'}
                , {field: `phone`, title: '联系电话'}
                , {field: 'region', title: '收货区域'}
                , {field: 'address', title: '详细地址'}
                ,{field:'isDefault', title:'是否为默认收货地址',width : 100, templet: '#switch', unresize: true}
                , {fixed: 'right', title: '操作', toolbar: '#bar'}
            ]
            ]
        });
        //监听工具条
        table.on('tool(AddressTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除？', function (index) {
                    $.get("/address/del", {"id": data.id}, function (ex) {
                        if (ex.code==0) {
                            obj.del();
                            notify.success(ex.msg)
                        } else {
                            notify.error(ex.msg)
                        }
                    })
                });
            }
        });

        var statics;
        form.on('switch(isteo)', function(obj){
            if (obj.elem.checked===true) {
                statics=0;
            }else {
                statics=1;
            }
            var data={
                "id":this.value,
                "isDefault":statics
            }

            $.ajax({
                type : "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                dataType: "json",
                url:"/address/updateisDefault",
                async : true,
                success : function(date){
                    if (date.code==0) {
                        notify.success(date.msg)
                        table.reload("AddressTable")
                    }else {
                        notify.error(date.msg)
                    }
                }
            })
        });

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                data = res;
            }
        });
        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var test={
                "address":$("#address").val()
            }
            var address = form.val('example');
            Object.assign(address, data);
            Object.assign(address, test);
            $.ajax({
                type : "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(address),
                dataType: "json",
                url:"/address/save",
                async : true,
                success : function(date){
                    if (date.code==0) {
                        notify.success(date.msg)
                        table.reload("AddressTable")
                        window.location.reload()
                    }else {
                        notify.error(date.msg)
                    }
                }
            })
        });
    });
</script>
</html>